<template>
  <el-form ref="roleFormRef" class="mqtt-form" status-icon :model="addForm"
           :rules="loginRules">
    <div class="title">行政区划</div>
    <el-form-item label="所属地市" prop="id" label-width="100px">
      <el-cascader
      style="width: ;100%"
      v-model="selectCode"
      :options="codeOptions"
      placeholder="请选择站点地市"
      @change="handleChangeCode"
    ></el-cascader>        
    </el-form-item>
    <div class="title">站点信息</div>
    <el-form-item label="站点ID" prop="id" label-width="100px">
      <el-input v-model="addForm.id" placeholder="请输入站点ID"/>
    </el-form-item>
    <el-form-item label="站点名称" prop="name" label-width="100px">
      <el-input v-model="addForm.name" placeholder="请输入站点名称"/>
    </el-form-item>
    <el-form-item label="经度" prop="lng" label-width="100px">
      <el-input v-model="addForm.lng" placeholder="请输入经度"/>
    </el-form-item>
    <el-form-item label="纬度" prop="lat" label-width="100px">
      <el-input v-model="addForm.lat" placeholder="请输入纬度"/>
    </el-form-item>
    <el-form-item label="设备编号" prop="model" label-width="100px">
      <el-input v-model="addForm.model" placeholder="请输入设备编号"/>
    </el-form-item>
    <div class="title">网络信息</div>
    <el-form-item label="MAC地址" prop="mac" label-width="100px">
      <el-input v-model="addForm.mac" placeholder="请输入MAC地址"/>
    </el-form-item>
    <el-form-item label="IP地址" prop="ip" label-width="100px">
      <el-input v-model="addForm.ip" placeholder="请输入IP地址"/>
    </el-form-item>
    <el-form-item label="子网掩码" prop="mask" label-width="100px">
      <el-input v-model="addForm.mask" placeholder="请输入子网掩码"/>
    </el-form-item>
    <el-form-item label="网关" prop="gateway" label-width="100px">
      <el-input v-model="addForm.gateway" placeholder="请输入网关"/>
    </el-form-item>
    <el-form-item label="DNS" prop="dns" label-width="100px">
      <el-input v-model="addForm.dns" placeholder="请输入DNS"/>
    </el-form-item>
  </el-form>
  <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" color="#3aecff" @click="submit">确 定</el-button>
  </span>
</template>

<script lang="ts" setup>
  import {defineEmits, defineProps, onMounted, ref} from "vue";

  import {addStation, updateStation} from "@/api/site";
  import {ElMessage} from "element-plus";

  import {provinceAndCityWithProData,getProvinceCodeByCode} from '@/assets/datas/code'

  const props = defineProps({data: {}})
  const emit = defineEmits(['refresh'])
  const addForm = ref(Object.assign({}, props.data))

 


  //@ts-ignore
  let isUpdate = !!addForm.value.id
  const loginRules = {
    id: [{required: true, trigger: 'blur', message: '请输入设备ID'}],
    name: [{required: true, trigger: 'blur', message: '请输入设备名称'}],
    lng: [{required: true, trigger: 'blur', message: '请输入经度'}],
    lat: [{required: true, trigger: 'blur', message: '请输入纬度'}],
    model: [{required: true, trigger: 'blur', message: '请输入设备编号'}],
  }

  const codeOptions = ref(provinceAndCityWithProData)
  let selectCode = ref([])
  const handleChangeCode = (val)=>{
    addForm.value.regionCode = val[1]
  }

  const submit = () => {
    if (isUpdate) {
      updateStation(addForm.value)
        .then(resp => {
          if (resp.code == 200) {
            ElMessage.success('更新成功')
            emit('refresh')
          } else {
            ElMessage.error('更新失败')
          }
        })
    } else {
      addStation(addForm.value)
        .then(resp => {
          if (resp.code == 200) {
            ElMessage.success('添加成功')
            emit('refresh')
          } else {
            ElMessage.error('添加失败')
          }
        })
    }

  }

  onMounted(()=>{
    if(addForm.value.regionCode){
      selectCode.value = getProvinceCodeByCode(addForm.value.regionCode)
    }
  })
</script>

<style lang="scss">
  @import '@/assets/styles/theme';

  .mqtt-form {
    box-sizing: content-box;

    .el-form-item {
      width: 100%;
      .el-cascader{
        width: 100%;
      }
      .el-form-item__label {
        color: $panel-color;
      }

      .el-input {
        --el-input-placeholder-color: #1b9caa;

        .el-input__wrapper {
          background: transparent;
          box-shadow: none;
          border: 1px solid #1b9caa;

          .el-input__inner {
            color: $panel-color;
          }
        }
      }

      .el-select-v2__wrapper {
        background: none;
        border: 1px solid #1b9caa;

        .el-select-v2__placeholder {
          color: $panel-color;
        }
      }

    }
  }
</style>

<style scoped lang="scss">
  @import '@/assets/styles/theme';

  .title {
    font-size: 15px;
    margin: 10px 0;
    padding-left: 5px;
    color: $panel-color;
    padding-bottom: 5px;
    border-left: 3px solid $panel-color;
    border-bottom: 1px solid #1b9caa;
  }

</style>
